EyesiM's Blog

CSS3 & HTML5 介绍，Bootstrap Fundation 框架介绍，Less 的介绍

• 分类: CSS 与 HTML

# CSS3 & HTML5 介绍，Bootstrap Fundation 框架介绍，Less 的介绍

标签（空格分隔）： HTML CSS

HTML5

http://ued.baidu.com/?p=894

1. 新的内容标签

新内容标签
HTML4中的内容标签级别相同，无法区分各部分内容。而HTML5中的内容标签互相独立，级别不同，搜索引擎以及统计软件等均可快速识别各部分内容。

2. 更好的表格体系

3. 音频、视频API

HTML5不但允许你在网页中直接整合视频、音频，同时更提供了一套功能丰富的API用来控制媒体播放，而这些用来控制媒体播放的元素也都是可以被编辑的。因此，HTML5在视频以及音频层面上实际已经可以替代常用的flash插件了。

4.地理(Geolocation) API

5.Canvas

style 中的 width 和 height 与 canvas 标签中所设置的 width 和 height
并不一样的 ，style 中的 宽高是在浏览器上面渲染出来的宽高，但是 canvas 设定的是画布实际的宽高，当 canvas的 width 和 height 没设定或者没设对时，就会被设置成默认值 300px 150px

CSS3

1. border-radius

http://www.w3cdream.com/content-sort-6-article-560.html

关于 border-radius
Safari 浏览器、Firefox 浏览器、Opera 浏览器及 Chrome 浏览器都支持这种绘制圆角边框的样式。

border-radius 可以设为 1-4 个值，规则为：

  • 1 个值时表示： border-top-left 、border-top-right 、 border-bottom-right 与 border-bottom-left 四个值相同
    1个值
  • 2 个值时表示： border-top-left 与 border-bottom-right 相同，border-top-right 与 border-bottom-left 相同，也就是对角相同
    2个值
  • 3 个值时表示： 第一个值表示 border-top-left ，第二个值表示 border-top-right 与 border-bottom-left 相同，第三个值表示 border-bottom-right
    3个值
  • 4 个值时表示： border-top-left 、border-top-right 、 border-bottom-right 与 border-bottom-left ， 从左上角按照顺时针排列
    4个值

border-radius 还有一种比较特殊的写法，两个值间加 “ / “

当 border-radius 的两个值间加了斜杠的时候，第一个值就表示水平半径，而第二个值则表示垂直半径。

  • 1 个值：表示其水平半径和垂直半径相等
    1个值
  • 2 个值: 表示其水平半径相等，但是两对角的垂直半径不相等 或者 其垂直半径相等，但是两对角的水平半径不相等
    2个值
  • 3 个值：表示其水平半径相等，但是 border-top-left 与 border-top-right/border-bottom-left 与 border-bottom-right 垂直半径不相等，或者其垂直半径相等，但是 border-top-left 与 border-top-right/border-bottom-left 与 border-bottom-right 水平半径不相等
    3个值
  • 4 个值：表示其水平半径相等，但是 border-top-left 与 border-top-right 与 border-bottom-left 与 border-bottom-right 这四个的垂直半径都不相等，或者表示其垂直半径相等，但是 border-top-left 与 border-top-right 与 border-bottom-left 与 border-bottom-right 这四个的水平半径都不相等
    4个值
    border-radius 的值除了可以用 px 来表示外，还可以用 % 来表示
    在用 px 时，存在着一个问题，元素变大，会出现与设计稿不符的情况，解决这个问题可以用 % 来解决。另外两个比较特殊的写法，圆与椭圆；
    另外boder 设置为 none ，并不影响 border-radius 的显示

    2. 2D 3D 转换与 transition 过渡

    2D
  • translate(x,y) 表示元素从其当前位置移动，水平移动 x ，垂直移动 y 。
  • rotate(xdeg) 表示旋转，deg 为单位，可有负值，正值表示顺时针旋转 x 度,负值表示逆时针旋转 x 度。
  • scale(x,y) 表示元素水平方向变为原来的 x 倍，垂直方向变为原来的 y 倍。
  • skew(xdeg,ydeg) 表示元素翻转给定的角度，根据给定的水平线（X 轴）和垂直线（Y 轴）参数
  • matrix() 把所有 2D 转换方法组合在一起,而且需要六个参数，包含数学函数，允许您：旋转、缩放、移动以及倾斜元素。
    3D
    3D 与 2D 最大的不同就是它添加了一个 Z 轴
    translateX()
    translateY()
    translateZ()

transition 过渡
作用在于使变化不会显得太突兀。

注意透明度兼容 IE ：filter:alpha(opacity=0);（取值 0-100）

3. 动画

http://www.ruanyifeng.com/blog/2014/02/css_transition_and_animation.html

animation: name duration timing-function delay iteration-count direction;

animation-name 指的是在 keyframes 中所定义的动画名字
animation-duration 指的是动画执行一次的时间，单位为秒或毫秒
animation-timing-function 指的是动画执行的速度曲线。默认为 ease
animation-delay 指的是动画执行前延迟的时间
animation-iteration-count 指的是动画执行的次数
animation-direction 指的是 是否应该轮流反向播放动画。

1. animation-timing-function 常用的几个值：

2. animation-iteration-count 的值

  • n

  • infinite 循环播放

3. animation-direction

  • 默认为 normal
  • alternate 反向轮流播放

用动画最要紧的是要记住要做兼容，不同的浏览器的内核可能不一样，我们需要在前面添加前缀，例如 -webkit- -ms- -moz- 等等

手机兼容

4.CSS3 另外一些特性

例如：

  • 背景颜色渐变 
    1
    2
    3
    4
    5
    6
    7
    8
     div {
        background: -moz-linear-gradient(top, #000000 0%, #ffffff 100%);
        background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#000000), color-stop(100%,#ffffff));
        background: -webkit-linear-gradient(top, #000000 0%,#ffffff 100%);
        background: -o-linear-gradient(top, #000000 0%,#ffffff 100%);
        background: -ms-linear-gradient(top, #000000 0%,#ffffff 100%);
        background: linear-gradient(to bottom, #000000 0%,#ffffff 100%);
    }

http://caibaojian.com/css3/values/image/linear-gradient().htm

  • rgba()
  • 多重背景以及用图片来作为元素边框等等

3. Bootstrap

http://www.bootcss.com/

4. Fundation

http://foundation.zurb.com/sites/docs/v/5.5.3/

5. Less

http://www.1024i.com/demo/less/

LESSCSS是一种动态样式语言，属于CSS预处理语言的一种，它使用类似CSS的语法，为CSS的赋予了动态语言的特性，如变量、继承、运算、函数等，更方便CSS的编写和维护。

LESSCSS可以在多种语言、环境中使用，包括浏览器端、桌面客户端、服务端。

less 好处在于

  • 可以方便地屏蔽浏览器私有语法差异。这个不用多说，封装对浏览器语法差异的重复处理，减少无意义的机械劳动。
  • 结构清晰，便于扩展。
  • 可以轻松实现多重继承。
    但缺点：
  • 须要编译。无论是放在客户端还是服务器端，都是一种额外的花销。
  • 层级嵌套编译出来的类名选择很累赘